<template>
  <div class="workshop_summary">
    <one-title title="车间信息总览" @refreshData="refresh"></one-title>
    <div class="fixed_top_56">
      <div class="workshop_summary_top" v-loading="isLoadingAnalysis">
        <div class="chart_item">
          <p class="chart_title">本周车间负荷分析 <span class="link_item" @click="linkToOtherPage('workshopLoad')">查看更多</span></p>
          <load-analysis></load-analysis>
        </div>
        <div class="chart_item">
          <p class="chart_title">本周车间质量分析 <span class="link_item" @click="linkToOtherPage('qualityProblem')">查看更多</span></p>
          <quality-analysis></quality-analysis>
        </div>
        <div class="chart_item">
          <p class="chart_title">本周现场问题总数分析 <span class="link_item" @click="linkToOtherPage('problemTypeCount')">查看更多</span></p>
          <problem-type-analysis :problemTypeData="problemTypeData"></problem-type-analysis>
        </div>
      </div>
      <div class="workshop_summary_bottom" v-loading="isLoading">
        <!--<div class="chart_item title">-->
        <!--<div class="title_tab">-->
        <!--<div class="title_item"-->
        <!--@click="tabState = true"-->
        <!--:class="{is_active: tabState}">-->
        <!--<span class="title_text">班组</span>-->
        <!--</div>-->
        <!--<div class="title_item"-->
        <!--@click="tabState = false"-->
        <!--:class="{is_active: !tabState}">-->
        <!--<span class="title_text">工作中心</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="search_item">-->
        <!--<el-radio-group v-model="changeTabs" size="small" @change="handleChangeDateTime">-->
        <!--<el-radio-button label="今日"></el-radio-button>-->
        <!--<el-radio-button label="本周"></el-radio-button>-->
        <!--<el-radio-button label="本月"></el-radio-button>-->
        <!--</el-radio-group>-->
        <!--<el-date-picker-->
        <!--v-model="completionDate"-->
        <!--@change="changeDate"-->
        <!--@blur="handleBlur"-->
        <!--type="daterange"-->
        <!--size="small"-->
        <!--align="right"-->
        <!--unlink-panels-->
        <!--:clearable=false-->
        <!--range-separator="至"-->
        <!--start-placeholder="开始日期"-->
        <!--end-placeholder="结束日期"-->
        <!--value-format="yyyy-MM-dd HH:mm:ss"-->
        <!--:default-time="['00:00:00', '23:59:59']">-->
        <!--</el-date-picker>-->
        <!--</div>-->
        <!--</div>-->
        <!--图表筛选组件-->
        <filter-panel :tabsList="tabsList" @filterChange="filterChange" :defaultTabIndex="0"></filter-panel>
        <!--班组-->
        <!--<work-group ref="WorkGroup" :dateValue="completionDate" v-if="tabState"></work-group>-->
        <work-group ref="WorkGroup" v-if="chartType === 'workgroup' && !isLoading"></work-group>
        <!--工作中心-->
        <!--<work-center ref="WorkCenter" :dateValue="completionDate" v-if="!tabState"></work-center>-->
        <work-center ref="WorkCenter" v-if="chartType === 'workcenter' && !isLoading"></work-center>
      </div>
    </div>
  </div>
</template>

<script>
import {
  LoadAnalysis,
  QualityAnalysis,
  ProblemTypeAnalysis,
  WorkGroup,
  WorkCenter
} from './components/index'
import FilterPanel from '../../../../components/chartFilterPanel/FilterPanel'

export default {
  name: 'WorkshopSummary',
  components: {
    LoadAnalysis,
    QualityAnalysis,
    ProblemTypeAnalysis,
    WorkGroup,
    WorkCenter,
    FilterPanel
  },
  data() {
    return {
      isLoading: false, // 数据加载
      isLoadingAnalysis: false, // 本周分析数据加载
      tabsList: [
        {label: '班组', name: 'workgroup'},
        {label: '工作中心', name: 'workcenter'},
      ],
      // completionDate: [
      //   this.getStartDateByUnit('week'),
      //   this.getEndDateByUnit('week'),
      // ],
      // pickerOptions: this.$dateConfig.pickerOptions, // 日期格式的快捷键配置项
      // changeTabs: '本周',
      // tabState: true,
      chartType: 'workgroup',
      filter: {}, // 筛选对象
      listData: [{}], // 图表数据
      loadAnaysisListData: [{}], //车间负荷
      QualityListData: [{}], //车间质量
      problemTypeData: [{}], // 问题类型
    }
  },
  mounted() {
    this.getAnalysisData()
  },
  methods: {
    // 筛选条件改变
    filterChange(filter) {
      this.chartType = filter.tab
      this.filter = filter
      this.getChartData()
    },
    //加载图表
    loadChart() {
      setTimeout(() => {
        if (this.chartType === 'workgroup') {
          this.$refs.WorkGroup.getChart(this.listData)
        }
        if (this.chartType === 'workcenter') {
          this.$refs.WorkCenter.getChart(this.listData)
        }
      }, 200)
    },
    // 获取图表数据
    getChartData() {
      let postData = {
        selectType: this.chartType,
        beginWorkStageDate: this.filter.completionDate[0],
        endWorkStageDate: this.filter.completionDate[1],
      }
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/workshopquanlifiedrate',
        data: postData,
        noCommit: true
      }).then((res) => {
        const result = res.data
        if (result) {
          this.listData = result.workshopQuanlifiedRate
          this.isLoading = false
          this.loadChart()
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 获取本周分析的数据
    getAnalysisData() {
      this.isLoadingAnalysis = true
      let postData = {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/workcentermessgeoverview',
        data: {
          beginCurrentWeekDate: this.moment(window.serverTime).startOf('week').format('YYYY-MM-DD 00:00:00'),
          endCurrentWeekDate: this.moment(window.serverTime).endOf('week').format('YYYY-MM-DD 23:59:59')
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        const result = res.data
        if (result) {
          this.loadAnaysisListData = result.wgroupWorkTimeList
          this.QualityListData = result.workshopQuanlityList
          this.problemTypeData = result.fieldProblemTypeList
        }
      }).finally(() => {
        this.isLoadingAnalysis = false
      })
    },
    // 切换今日/本周/本月
    handleChangeDateTime() {
      if (this.changeTabs === '今日') {
        this.completionDate = [
          this.moment().format('YYYY-MM-DD 00:00:00'),
          this.moment().format('YYYY-MM-DD 23:59:59')
        ]
      } else if (this.changeTabs === '本周') {
        this.completionDate = [
          this.getStartDateByUnit('week'),
          this.getEndDateByUnit('week'),
        ]
      } else {
        this.completionDate = [
          this.getStartDateByUnit('month'),
          this.getEndDateByUnit('month'),
        ]
      }
      this.refresh()
    },
    getStartDateByUnit(unitOfTime, isServerTime = true) {
      let momentTime = null;
      isServerTime ? momentTime = this.moment(window.serverTime) : momentTime = this.moment()
      return momentTime.startOf(unitOfTime).format('YYYY-MM-DD 00:00:00')
    },
    getEndDateByUnit(unitOfTime, isServerTime = true) {
      let momentTime = null;
      isServerTime ? momentTime = this.moment(window.serverTime) : momentTime = this.moment()
      return momentTime.endOf(unitOfTime).format('YYYY-MM-DD 23:59:59')
    },
    handleBlur() {
      let start = this.completionDate[0]
      let end = this.completionDate[1]

      let currentStart = this.moment().format('YYYY-MM-DD 00:00:00')
      let currentEnd = this.moment().format('YYYY-MM-DD 23:59:59')
      let weekStart = this.getStartDateByUnit('week')
      let weekEnd = this.getEndDateByUnit('week')
      let monthStart = this.getStartDateByUnit('month')
      let monthEnd = this.getEndDateByUnit('month')
      if (start === currentStart && end === currentEnd) {
        this.changeTabs = '今日'
        return
      }
      if (start === weekStart && end === weekEnd) {
        this.changeTabs = '本周'
        return
      }
      if (start === monthStart && end === monthEnd) {
        this.changeTabs = '本月'
        return
      }
      this.changeTabs = ''
    },
    // 手动选择时间范围
    changeDate() {
      this.refresh()
    },
    // 刷新
    refresh() {
      // if (this.tabState) {
      //   this.$refs.WorkGroup.refresh()
      // } else {
      //   this.$refs.WorkCenter.refresh()
      // }
      this.getAnalysisData()
      this.getChartData()
    },
    // 跳转到“更多”相关页面
    linkToOtherPage(link) {
      if (!link) return
      this.$router.push({
        path: link
      })
    }
  }
}
</script>

<style scoped lang="less">
  .workshop_summary {
    .workshop_summary_top {
      height: 350px;
      padding: 20px 20px 0 20px;
      .chart_item {
        width: calc(33.333333% - 14px);
        box-sizing: border-box;
        &:nth-child(2) {
          margin: 0 21px;
        }
        .chart_title {
          padding: 10px 20px;
          position: relative;
          .link_item{
            display: block;
            height: 42px;
            position: absolute;
            top: 50%;
            right: 15px;
            color: #409EFF;
            margin-top: -10px;
            cursor: pointer;
          }
        }
      }
    }

    .workshop_summary_bottom {
      border: 1px solid #dcdfe6;
      margin: 0 20px 40px;
      padding-bottom: 40px;
      height: 595px;

      .chart_title {
        .el-tabs__nav-scroll {
          padding-left: 20px;
        }
      }

      .title {
        display: flex;
        height: 56px;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
        position: relative;
        z-index: 999;

        .title_tab {
          display: flex;
          height: 100%;

          .title_item {
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            border-bottom: 2px solid transparent;
            color: #666;
            cursor: pointer;

            &.is_active {
              color: #000;
              border-bottom-color: #00b4ff;
            }
          }
        }

        .search_item {
          .el-radio-group {
            padding-right: 10px;
            margin-bottom: 1px;
          }
        }
      }

      .chart_item {
        margin: 0;
        width: 100%;
        border: none;
        border-bottom: 1px solid #dcdfe6;
      }
    }

    .chart_item {
      border: 1px solid #dcdfe6;
      float: left;

      .chart_title {
        font-size: 14px;
        font-family: 'PingFangSC-Medium';
        border-bottom: 1px solid #eee;
      }
    }
  }
</style>
